<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <!--参考https://www.jb51.net/article/178607.htm-->
    <title>Title</title>

    <link href="../static/css/style.default.css" rel="stylesheet">
    <link href="../static/css/select2.css" rel="stylesheet" />
    <link href="../static/css/style.datatables.css" rel="stylesheet">
    <link href="../static/css/datatables.responsive.css" rel="stylesheet">

    <script src="../static/js/jquery-1.11.1.min.js"></script>
    <script src="../static/js/jquery-migrate-1.2.1.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="../static/js/modernizr.min.js"></script>
    <script src="../static/js/pace.min.js"></script>
    <script src="../static/js/retina.min.js"></script>
    <script src="../static/js/jquery.cookies.js"></script>

    <script src="../static/js/jquery.datatables.min.js"></script>
    <script src="../static/js/vue.js"></script>

    <style>
         #showTime
         {
          width: 300px;
          height: 60px;
          font-size: 60px;
          line-height: 60px;
         }

          *{margin:0;padding:0;}

        /*参考https://jingyan.baidu.com/article/f3ad7d0fa974c749c3345bff.html*/
        /*.circle{*/
            /*border: 1px solid #3db8da;*/
            /*width:120px;*/
            /*height:120px;*/
            /*border-radius: 60px;*/
        /*}*/

        button {
            margin:10px
        }

        #startBn, #restBn{
             width:50px;
             height:50px;
             background-color:#ffffff;
             border-radius:50%;
             opacity:0.5;
             font-weight:1000
        }

    </style>
</head>
<body>
    <div class="contentpanel">
        <div class="row">

            <div class="col-sm-4">
                <!--占位符-->
                <div id="content">
                    <div v-for="count in 5" class="row">
                        <div class="col-sm-12">&nbsp;</div>
                    </div>
                    <div style="text-align:center">
                        <label style="font-size: 40px;color: red">Normal</label>
                    </div>
                    <div v-for="count in 2" class="row">
                        <div class="col-sm-12">&nbsp;</div>
                    </div>
                </div>

                <!--计时器-->
                <div id="clockControl" class="row">
                    <div class="col-sm-12">

                        <div class="row">
                            <div style="text-align:center">
                                <label id="showTime" v-text="showTime_v">00:00:00</label>
                            </div>
                        </div>

                        <div class="row">
                            <div style="text-align: center">
                                <!--开始按钮 ~ 暂停按钮-->
                                <input id="startBn" type="button" v-bind:value="startBn_v" v-on:click="clickHandler('startBn')">
                                <!-- 复位(结束) 按钮 -->
                                <input id="restBn" type="button" v-bind:value="restBn_v" v-on:click="clickHandler('restBn')">
                            </div>
                        </div>
                    </div>
                </div>

                 <div class="row">
                    <div class="col-sm-12">
                        &nbsp;
                    </div>
                 </div>

                 <div id="musicPlay" class="row">
                    <div class="col-sm-12" style="text-align:center">
                        <button type="button" class="btn btn-danger btn-circle" title="点击我听A键提示音" v-on:click="music_clickPlay('click1')">A</button>
                        <button type="button" class="btn btn-success btn-circle" title="点击我听S键提示音" v-on:click="music_clickPlay('click2')">S</button>
                        <button type="button" class="btn btn-info btn-circle" title="点击我听D键提示音" v-on:click="music_clickPlay('click3')">D</button>
                    </div>
                </div>

                <!--不显示audio-->
                <div style="display: None;">
                    <!--    参考<https://www.w3school.com.cn/html5/att_audio_autoplay.asp> -->
                    <audio id="click1" controls="controls" autoplay="autoplay">
                        <source src="../static/mp3/click4.mp3" type="audio/mpeg">
                    </audio>

                    <audio id="click2" controls="controls">
                        <source src="../static/mp3/click2.mp3" type="audio/mpeg">
                    </audio>

                    <audio id="click3" controls="controls">
                        <source src="../static/mp3/click3.mp3" type="audio/mpeg">
                    </audio>
                </div>
            </div>
            
            <div class="col-sm-8">
                <div class="panel panel-primary-head">
                    <div class="panel-heading">
                        <h4 class="panel-title">根据不同提示音，按下指定按键</h4>
                        <p>不同提示音对应不同按键(A,S,D)，提示音出现的时间是一个随机数值</p>
                    </div><!-- panel-heading -->

                    <table id="basicTable" class="table table-striped table-bordered responsive">
                        <thead class="">
                            <tr>
                                <th>节拍开始时间</th>
                                <th>节拍响应时间</th>
                                <th>节拍要求键入</th>
                                <th>节拍实际键入</th>
                            </tr>
                        </thead>

                        <tbody id="content1">
                            <tr v-for="count in 10">
                                <td>Tiger Nixon</td>
                                <td>System Architect</td>
                                <td>Edinburgh</td>
                                <td>61</td>
                            </tr>
                        </tbody>
                    </table>
                </div><!-- panel -->
            </div>
        </div>
    </div>

    <script>

       //监听全局键盘按下事件，例如监听全局回车事件
       $(document).keydown(function(event){
           if(event.keyCode == 65){
               alert('你按下了A');
           }
           else if(event.keyCode == 83){
               alert('你按下了S');
           }
           else if(event.keyCode == 68){
               alert('你按下了D');
           }
       });

        var clickVue = new Vue({
            el: "#content",
            data: {
                list : []
            }
        });

       var clickVue1 = new Vue({
           el: "#content1",
           data: {
               list : []
           }
       })

       var clockT = new Vue({
           el : "#clockControl",
           data : {
               showTime_v : "00:00:00",
               startBn_v : "开始",
               restBn_v : "结束",
               bool_flag : false,
               pauseTime : 0,
               pauseDate : 0,
               time : 0,
           },

           mounted : function () {
               window.setInterval(this.animation,16);
           },

           methods : {

               //转化时间函数
               animation :function() {
                   if(!this.bool_flag) return;
                   //前时间减去上次开启时间减去暂停累计时间
                   var times=new Date().getTime()- this.time- this.pauseTime;
                   var minutes=Math.floor(times/60000);//毫秒转化为分钟
                   var seconds=Math.floor((times-minutes*60000)/1000);//已知分钟
                   //将time减去分钟 除去1000得出 秒
                   var ms=Math.floor((times-minutes*60000-seconds*1000)/10);//
                   this.showTime_v =
                       (minutes<10 ? "0" +minutes : minutes)+":"
                       +(seconds<10 ? "0"+seconds :seconds)+":"
                       +(ms<10 ? "0"+ms : ms);
//                   alert("animation")
                },

               //点击时的事件
               clickHandler : function (buttonType) {
                   if(buttonType==="startBn"){
                       this.bool_flag = !this.bool_flag;
                       if(this.bool_flag){
                           this.startBn_v = "暂停";
                           //如果我们上一次暂停时间是空，表示没有暂停过，因此，直接返回0
                           //如果上次的暂停时间是有值得，用当前毫秒数减去上次的毫秒数，这样就会得到暂停时间
                           this.pauseTime += (!this.pauseDate ? 0 : new Date().getTime()- this.pauseDate);
                           if(this.time) return;
                           this.time = new Date().getTime();
                           return;//是为bool判断跳出
                       }

                       this.startBn_v="开始";
                       this.pauseDate=new Date().getTime();
                       return;//是为this是否等于startBn判断跳出
                   }
                   this.startBn_v ="开始";
                   this.pauseTime = 0;
                   this.pauseDate = null;
                   this.bool_flag = false;
                   this.time = 0;
                   this.showTime_v = "00:00:00";
               }
           }
       })

       var musicP = new Vue({
           el: "#musicPlay",
           data : {

           },

//            mounted : function () {
//                window.setInterval(this.music_autoPlay,2000)
//            },

           methods : {

               music_autoPlay : function () {
                   var rand = Math.round(Math.random()*3);  //随机获取1~3的值，用来模拟播放A,S,D的提示音  一般由后台传过来

                   var temp = "click" + rand
                   console.log(temp)
                   var audio = document.getElementById(temp)
                   //参考[js控制html5 audio的暂停、播放、停止](https://www.cnblogs.com/kingplus/p/5587441.html)
                   if(audio!==null) {
                       //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
//                        alert(audio.paused);
                       if (audio.paused) {
                           audio.play();//audio.play();// 这个就是播放
                       } else {
                           audio.pause();// 这个就是暂停
                       }
                   }

                   //audio.play()会报如下错误：code007_audioAutoTest.html:51 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first
                   //参考 https://www.cnblogs.com/wsg25/p/9640316.html  更新chrome即可
               },

               music_clickPlay : function(music_id){

//                    alert(music_id)
                   var audio = document.getElementById(music_id)
                   //参考[js控制html5 audio的暂停、播放、停止](https://www.cnblogs.com/kingplus/p/5587441.html)
                   if(audio!==null) {
                       //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
//                        alert(audio.paused);
                       if (audio.paused) {
                           audio.play();//audio.play();// 这个就是播放
                       } else {
                           audio.pause();// 这个就是暂停
                       }
                   }
               }

           }
       })

    </script>
</body>
</html>